import React, { useState } from 'react';
import { useAppDispatch } from '../store';
import { addMsgAction } from '../store/action/todo';

export default function Header() {
  const [task, setTask] = useState('');
  const dispatch = useAppDispatch();
  const addMsg = (e: any) => {
    if (e.code === 'Enter') {
      dispatch(addMsgAction({ id: Date.now(), task, isDone: false }));
      setTask('');
    }
  };

  return (
    <header className="header">
      <h1>todos</h1>
      <input
        value={task}
        onChange={(e) => setTask(e.target.value)}
        onKeyUp={addMsg}
        className="new-todo"
        placeholder="需要做什么"
        autoFocus
      />
    </header>
  );
}
